<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>定位布局</title>

    <style>
      /* 绝对定位 */
      .box_absolute {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
       参考博客：https://www.ruanyifeng.com/blog/2019/11/css-position.html

       - 定位：绝对定位、相对定位、固定定位
       1. 绝对定位(position:absolute)
          - absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
          - 它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。
            另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用；
          - 原则：子绝父相
            - 子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。
            - 如果不这么做，子元素就会相对 body 或浏览器定位产生不好的效果。
          - 绝对定位居中(上下左右居中)
            代码：position: absolute; left: 0; top: 0; bottom: 0; right: 0;

       2. 相对定位(position:relative)
          - relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置;
          - 必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离;

       3. 固定定位(position:fixed)
          - fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
           这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样；
          - 它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
    
       4. 相对定位、绝对定位、固定定位的区别：
          - 绝对定位：相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素，在文档流中不占据空间;
          - 相对定位：相对于自身进行偏移，即定位基点是元素原来位置，在文档流中占据空间；
          - 固定定位：与绝对定位类似，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口，它不会随页面滚动而移动;
          [注] 只有 position 设为 relative、 absolute 或 fixed，那么top、 right、 bottom 和 left 属性才会起作用;
     -->
    <div class="box_absolute"></div>

    <script></script>
  </body>
</html>
